<template>
	<div class="quiz-container">
		<!-- 背景装饰 -->
		<div class="background-decoration">
			<div class="floating-leaves">
				<div
					class="leaf"
					v-for="i in 10"
					:key="i"
					:style="getLeafStyle()"
				></div>
			</div>
		</div>
		<div class="quiz-content">
			<h2 class="page-title">共7种能力测试，每种10道题</h2>

			<!-- 主要内容区域 -->
			<div class="main-content">
				<!-- 左侧能力测试列表 -->
				<div class="ability-list-outer">
					<div class="ability-cards">
						<div
							v-for="(ability, index) in abilities"
							:key="ability.id"
							class="ability-card"
							:class="getCardClasses(ability, index)"
							@click="selectAbility(ability)"
						>
							<!-- 选中状态的白色背景图片 -->
							<div
								v-if="getCardClasses(ability, index)['active']"
								class="white-bg-image"
							></div>

							<div class="card-number">{{ index + 1 }}.</div>
							<div class="card-content">
								<h3 class="ability-name">
									{{ ability.name }}
								</h3>
								<div class="ability-stats">
									<span class="question-count"
										>共{{ ability.totalQuestions }}题</span
									>
									<span class="completed-count"
										>已答{{
											ability.completedQuestions
										}}题</span
									>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- 右侧问题区域 -->
				<div class="question-section">
					<div v-if="selectedAbility" class="question-container">
						<h3 class="question-title">
							{{ selectedAbility.name }}
						</h3>
						<div class="question-progress">
							<span
								>进度：{{
									selectedAbility.completedQuestions
								}}/{{ selectedAbility.totalQuestions }}</span
							>
						</div>
						<div class="question-content">
							<!-- 这里显示具体的问题内容 -->
							<p>点击左侧的能力测试开始答题</p>
						</div>
					</div>
					<div v-else class="welcome-container">
						<!-- 吉祥物图像 -->
						<div class="mascot">
							<div class="mascot-body">
								<div class="mascot-face">
									<div class="eye left-eye"></div>
									<div class="eye right-eye"></div>
									<div class="mouth"></div>
								</div>
								<div class="mascot-belly"></div>
							</div>
							<div class="mascot-arms">
								<div class="arm left-arm"></div>
								<div class="arm right-arm"></div>
							</div>
						</div>

						<!-- 对话气泡 -->
						<div class="speech-bubble">
							<img
								src="~/assets/images/iknow.svg"
								alt="我知道啦"
								class="bubble-image"
							/>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Check } from '@element-plus/icons-vue'

interface Ability {
	id: string
	name: string
	totalQuestions: number
	completedQuestions: number
	completed: boolean
}

// 选中的能力测试
const selectedAbility = ref<Ability | null>(null)

// 能力测试数据
const abilities = ref<Ability[]>([
	{
		id: 'self-awareness',
		name: '认识自己的能力',
		totalQuestions: 10,
		completedQuestions: 0,
		completed: false,
	},
	{
		id: 'self-acceptance',
		name: '对自己诚实的能力',
		totalQuestions: 10,
		completedQuestions: 0,
		completed: false,
	},
	{
		id: 'personalized-learning',
		name: '属于自己的个性化的学习能力',
		totalQuestions: 10,
		completedQuestions: 0,
		completed: false,
	},
	{
		id: 'cooperation',
		name: '双赢的合作精神与能力',
		totalQuestions: 10,
		completedQuestions: 0,
		completed: false,
	},
	{
		id: 'future-awareness',
		name: '面对未知的勇气与能力',
		totalQuestions: 10,
		completedQuestions: 0,
		completed: false,
	},
	{
		id: 'self-worth',
		name: '建立自己价值信仰的能力',
		totalQuestions: 10,
		completedQuestions: 0,
		completed: false,
	},
	{
		id: 'self-expression',
		name: '活出自己的能力',
		totalQuestions: 10,
		completedQuestions: 0,
		completed: false,
	},
])

// 生成叶子样式
const getLeafStyle = () => {
	return {
		left: Math.random() * 100 + '%',
		animationDelay: Math.random() * 5 + 's',
		animationDuration: Math.random() * 3 + 2 + 's',
	}
}

// 方法
const selectAbility = (ability: Ability) => {
	selectedAbility.value = ability
	ElMessage.success(`选择 ${ability.name} 测试`)
}

// 获取卡片样式类
const getCardClasses = (ability: Ability, index: number) => {
	const classes: any = {
		completed: ability.completed,
		active: selectedAbility.value?.id === ability.id,
	}

	if (selectedAbility.value) {
		const selectedIndex = abilities.value.findIndex(
			(a) => a.id === selectedAbility.value!.id
		)
		if (selectedIndex === index + 1) {
			classes['prev-card'] = true
		}
		if (selectedIndex === index - 1) {
			classes['next-card'] = true
		}
	}

	return classes
}

const startTest = (ability: Ability) => {
	if (ability.completed) {
		ElMessage.info('该测试已完成')
		return
	}

	ElMessage.success(`开始 ${ability.name} 测试`)
	// 这里可以跳转到具体的测试页面
	// navigateTo(`/test/${ability.id}`);
}
</script>

<style scoped>
.quiz-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 50%, #a5d6a7 100%);
	position: relative;
	overflow: hidden;
}

/* 背景装饰 */
.background-decoration {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.floating-leaves {
	position: absolute;
	width: 100%;
	height: 100%;
}

.leaf {
	position: absolute;
	width: 20px;
	height: 20px;
	background: #4caf50;
	border-radius: 0 100% 0 100%;
	animation: float 5s infinite ease-in-out;
}

@keyframes float {
	0%,
	100% {
		transform: translateY(0) rotate(0deg);
		opacity: 0.7;
	}
	50% {
		transform: translateY(-20px) rotate(180deg);
		opacity: 1;
	}
}

.quiz-content {
	position: relative;
	/* background: red; */
	z-index: 10;
	padding: 20px;
	max-width: 95%;
	margin: 0 auto;
}

/* 主要内容 */
.main-content {
	display: flex;
	gap: 0;
	align-items: stretch;
	height: 100vh;
}

/* 左侧能力列表最外层容器（绿色） */
.ability-list-outer {
	flex: 0 0 445px; /* 420px / 16 = 26.25rem */
	height: 100%;
	background: #9ebd6f; /* 绿色背景 */
	border-radius: 20px 0px 0px 20px;
	position: relative;
	padding: 45px 0px;
	box-sizing: border-box;
}

/* 提问卡片容器 */
.ability-cards {
	width: 400px;
	margin-left: auto; /* 居右侧布局 */
	display: flex;
	flex-direction: column;
	gap: 0; /* 移除间隙 */
	margin-top: 0;
	margin-bottom: 0;
}

/* 页面标题 */
.page-title {
	color: #000;
	text-align: center;
	font-family: 'Alibaba PuHuiTi 3.0';
	font-size: 26px;
	font-style: normal;
	font-weight: 800;
	line-height: 120%; /* 31.2px */
	margin-bottom: 30px;
	padding: 0 20px;
}

.ability-card {
	display: flex;
	align-items: center;
	background: #9ebd6f; /* 默认绿色背景 */
	border-radius: 0; /* 移除默认圆角 */
	padding: 16px 20px;
	cursor: pointer;
	transition: all 0.3s ease;
	color: #333;
	position: relative;
	margin-bottom: 0; /* 移除卡片间隙 */
	border: none; /* 确保没有边框 */
	height: 99px; /* 设置固定高度 */
	box-sizing: border-box;
}

.ability-card:hover {
	background: rgba(158, 189, 111, 0.8);
}

.ability-card.active {
	background: transparent; /* 选中时背景透明，使用白色背景图片 */
	position: relative;
	/* background: orchid; 选中时背景黑色 */
}

/* 选中状态下的文字颜色 */
.ability-card.active .card-number,
.ability-card.active .ability-name,
.ability-card.active .question-count,
.ability-card.active .completed-count {
	color: black; /* 白色文字 */
}

/* 白色背景图片 */
.white-bg-image {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); /* 居中定位 */
	width: 400px;
	height: 198px; /* 与卡片高度匹配 */
	background-image: url('~/assets/images/whitebg.svg');
	background-repeat: no-repeat;
	/* background-color: red; */
	z-index: 1; /* 在卡片背景之上，但在文字之下 */
}

.card-number {
	font-size: 18px;
	font-weight: bold;
	margin-right: 16px;
	min-width: 32px;
	color: #333;
	position: relative;
	z-index: 2; /* 在白色背景图片之上 */
}

.card-content {
	flex: 1;
	position: relative;
	z-index: 2; /* 在白色背景图片之上 */
}

.ability-name {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 4px;
	color: #333;
}

.ability-stats {
	display: flex;
	gap: 16px;
	font-size: 14px;
	color: #666;
}

.question-count {
	color: #666;
}

.completed-count {
	color: #9ebd6f;
	font-weight: 500;
}

/* 右侧问题区域 */
.question-section {
	flex: 1; /* 占用剩余空间 */
	height: 100%;
}

.question-container {
	height: 100%;
	background: #ffffff;
	border-radius: 0 20px 20px 0;
	padding: 30px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(20px);
	margin-left: -1px; /* 与左侧无缝连接 */
	position: relative;
}

.question-title {
	font-size: 24px;
	font-weight: bold;
	color: #333;
	margin-bottom: 20px;
	text-align: center;
}

.question-progress {
	text-align: center;
	margin-bottom: 30px;
	color: #666;
	font-size: 16px;
}

.question-content {
	min-height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #666;
	font-size: 16px;
}

.welcome-container {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	background: #ffffff;
	border-radius: 0 20px 20px 0;
	padding: 30px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(20px);
	margin-left: -1px; /* 与左侧无缝连接 */
}

/* 吉祥物设计 */
.mascot {
	position: relative;
	margin-bottom: 20px;
}

.mascot-body {
	width: 120px;
	height: 140px;
	background: linear-gradient(135deg, #d7ccc8 0%, #bcaaa4 100%);
	border-radius: 60px 60px 40px 40px;
	position: relative;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.mascot-face {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 60px;
}

.eye {
	position: absolute;
	width: 12px;
	height: 12px;
	background: #333;
	border-radius: 50%;
	top: 15px;
}

.left-eye {
	left: 20px;
}

.right-eye {
	right: 20px;
}

.mouth {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 20px;
	height: 10px;
	background: #333;
	border-radius: 0 0 20px 20px;
}

.mascot-belly {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 60px;
	background: #f5f5dc;
	border-radius: 50%;
}

.mascot-arms {
	position: absolute;
	top: 40px;
	width: 100%;
}

.arm {
	position: absolute;
	width: 30px;
	height: 60px;
	background: #d7ccc8;
	border-radius: 15px;
}

.left-arm {
	left: -15px;
	transform: rotate(-20deg);
}

.right-arm {
	right: -15px;
	transform: rotate(20deg);
}

/* 对话气泡 */
.speech-bubble {
	position: relative;
	max-width: 100%;
}

.bubble-image {
	width: 100%;
	height: auto;
	max-width: 33.375rem; /* 534px / 16 = 33.375rem */
	display: block;
}

/* 响应式设计 */
@media (max-width: 1024px) {
	.main-content {
		flex-direction: column;
		gap: 20px;
	}

	.question-section {
		flex: none;
		width: 100%;
	}
}

@media (max-width: 768px) {
	.quiz-content {
		padding: 16px;
	}

	.ability-list {
		padding: 20px;
	}

	.ability-card {
		padding: 12px 16px;
	}

	.card-number {
		font-size: 16px;
		margin-right: 12px;
	}

	.ability-name {
		font-size: 14px;
	}

	.ability-stats {
		flex-direction: column;
		gap: 2px;
		font-size: 12px;
	}

	.question-container {
		padding: 20px;
	}

	.question-title {
		font-size: 20px;
	}

	.question-content {
		min-height: 200px;
		font-size: 14px;
	}

	.speech-bubble {
		max-width: 25rem; /* 400px / 16 = 25rem */
	}

	.bubble-image {
		max-width: 25rem; /* 400px / 16 = 25rem */
	}
}
</style>
